// ** React Imports
import { useContext, useRef, useEffect } from 'react'
import { Link, useNavigate } from 'react-router-dom'

// components
import TopNav from './topNav'
import LeftOne from './leftTop'
import LeftTwo from './leftTwo'
import LeftThree from './leftThree'
import LeftFour from './leftFour'
import CenterOne from './centerOne'
import CenterTwo from './centerTwo'
import CenterThree from './centerThree'
import RightOne from './rightOne'
import RightTwo from './rightTwo'
import RightThree from './rightThree'
import RightFour from './rightFour'

// ** Styles
import './index.scss'

const Protect = () => {
  const screenRef = useRef()
  useEffect(() => {
    screenRef.current.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
    window.onresize = () => {
      screenRef.current.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
    }
  }, [])

  const getScale = (w = 1920, h = 1080) => {
    const ww = window.innerWidth / w
    const wh = window.innerHeight / h
    return ww < wh ? ww : wh
  }

  return (
    <div className="screen-container-party">
      <div className="screen" ref={screenRef}>
        <TopNav></TopNav>
        <div className="content">
          <div className="left">
            <div className="leftOne">
              <LeftOne />
            </div>
            <div className="leftTwo">
              <LeftTwo />
            </div>
            <div className="leftThree">
              <LeftThree />
            </div>
            <div className="leftFour">
              <LeftFour />
            </div>
          </div>
          <div className="center">
            <CenterOne className="centerOne" />
            <CenterTwo className="centerTwo" />
            <CenterThree className="centerThree" />
          </div>
          <div className="right">
            <RightOne className="rightOne" />
            <RightTwo className="rightTwo" />
            <RightThree className="rightThree" />
            <RightFour className="rightFour" />
          </div>
        </div>
      </div>
    </div>
  )
}

export default Protect
